<template>
    <div  style="margin: 0 100px;" >
        <div class="top">
            <div class="text">
                <div class="name">{{ lotInfo.bdmc }}</div>
                <div class="company">拍卖企业：天津鑫容一诺拍卖有限公司</div>
                <div class="tel">联系方式： 15222668329</div>
            </div>

            <div class="imgSmall">
                <el-image v-for="(item, index) in imgList" :key="index" class="imgS" :src="item" alt="加载失败"></el-image>
            </div>
            
        </div>
        <div class="middle">
            <div class="main" >
                <div class="line1">
                    <div class="top">
                        <h3>{{ lotInfo.bdmc }}</h3>                    
                    </div>
                    
                    <div class="imgLarge">
                        <el-image class="imgL" :src= 'imgSrc' alt="加载失败"></el-image>
                        <div class="state">即将开始</div>
                    </div>
                    <div class="imgSmall">
                        <el-image v-for="(item, index) in imgList" :key="index" class="imgS" :src="item" alt="加载失败" @click="imgChange(item)"></el-image>
                    </div>
                    <div class="char">
                        <div>围观数:{{ lotInfo.wgs }}</div>
                        <div>加入关注</div>
                    </div>
                </div>
                <div class="line2">
                    <div class="timer" style="font-size: 18px; text-align: center;">
                        倒计时
                        <el-statistic ref="time1" :value="countTime" format="DD天-HH小时:mm分:ss秒" time-indices style="font-size: 18px; color: #f00;">
                        </el-statistic>
                    </div>
                    <div class="button">
                        <div style="text-align: left; font-size: 18px; font-weight: bold; padding: 10px 0 50px 10px;">当前价:{{ lotInfo.qpj }}元</div>
                        <el-button type="primary" style="padding: 10px 30px; margin: 0 auto;">报名</el-button>
                    </div>
                    <div class="desc">
                        <div style="text-align: left; padding: 10px 0; font-size: 12px;">起拍价:{{ lotInfo.qpj }}元</div>
                        <div style="text-align: left; padding: 10px 0; font-size: 12px;">保证金:{{ lotInfo.bzj }}元</div>
                        <div style="text-align: left; padding: 10px 0; font-size: 12px;">加价幅度:{{ lotInfo.jjfd }}元</div>
                        <div style="text-align: left; padding: 10px 0; font-size: 12px;">保留价:{{ lotInfo.blj }}元</div>
                        <div style="text-align: left; padding: 10px 0; font-size: 12px;">评估价:{{ lotInfo.pgj }}元</div>
                        <div style="text-align: left; padding: 10px 0; font-size: 12px;">限时竞价时间:{{ xsTime }}</div>
                        <div style="text-align: left; padding: 10px 0; font-size: 12px;">延时竞价时间:{{ ysTime }}</div>
                        <div style="text-align: left; padding: 10px 0; font-size: 12px;">所在地:{{ szd }}</div>
                    </div>
                    
                </div>

            </div>

            <div class="right">
                <el-input class="search" placeholder="搜索本场标的" prefix-icon="el-icon-search" :disabled="able"></el-input>
                <div class="rightTop">
                    <div class="textArea1">
                        <el-tabs>
                            <el-tab-pane class="button" label="出价信息">
                                <el-table :data="bidderData" height="200">
                                    <el-table-column width="80" property="zt" label="状态"></el-table-column>
                                    <el-table-column width="80" property="jmh" label="竞买号"></el-table-column>
                                    <el-table-column width="80" property="cj" label="出价"></el-table-column>
                                </el-table>
                            </el-tab-pane>
                            <el-tab-pane class="button" label="通知">
                                <div style="height: 100%;">暂无消息</div>

                            </el-tab-pane>
                            <el-tab-pane class="button" label="拍卖师信息">
                                <div style="height: 100%;">
                                    <img :src="pmsInfo.pmszsz" style="width: 100px; height: 80px;"/>
                                    <div>{{ pmsInfo.pmsxm }}</div>
                                    <div>证书编号:{{ pmsInfo.pmszsbh }}</div>
                                </div>
                            </el-tab-pane>
                        </el-tabs>
                        <!-- <el-table :data="bidderData">
                            <el-table-column width="70" property="zt" label="状态"></el-table-column>
                            <el-table-column width="70" property="jmh" label="竞买号"></el-table-column>
                            <el-table-column width="70" property="cj" label="出价"></el-table-column>
                        </el-table> -->
                        <!-- <el-popover
                        placement="right"
                        width="200"
                        trigger="click">
                            <el-table :data="netWorkBidderData">
                                <el-table-column width="70" property="name" label="姓名"></el-table-column>
                                <el-table-column width="120" property="phone" label="联系方式"></el-table-column>
                            </el-table>
                            <el-button class="sideBtn" slot="reference">
                                <div>网</div>
                                <div>络</div>
                                <div>竞</div>
                                <div>买</div>
                                <div>人</div>
                                <div>列</div>
                                <div>表</div>
                                <div>12</div>
                                <div>人</div>
                                <div>报</div>
                                <div>名</div>
                            </el-button>
                        </el-popover> -->
                    </div>
                </div>
            </div>
        </div>
        
        <div class="bottom">
            <el-tabs type="border-card" style="margin: 10px 0;">
                <el-tab-pane label="拍卖公告" >
                    <div ref="notice">拍卖公告</div>
                </el-tab-pane>
                <el-tab-pane label="竞买须知" >
                    <div ref="attention">竞买须知</div>
                </el-tab-pane>
                <el-tab-pane label="标的介绍" >
                    <div ref="introduction" class="introduction"></div>
                </el-tab-pane>
                <el-tab-pane label="竞价记录" >
                    <div ref="record">竞价记录</div>
                </el-tab-pane>
                <el-tab-pane label="重要提示" >
                    <div ref="important"></div>
                </el-tab-pane>
            </el-tabs>
        </div>
        

        
        

    </div>
  </template>


  <script>
  import { getLotInfo, getPmhInfo,getPmsInfo } from '@/api/lot/lot';

  export default {
    components:{

    },
      data(){
          return{
              bd:[],
              imgSrc: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
              imgList: [
            //   'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
            //   'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
            //   'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
            //   'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
              ],
              netWorkBidderData:[
                {
                    name: '赵四',
                    phone: '13366667777'
                },
                {
                    name: '赵四五',
                    phone: '13366667777'
                }
              ],
              bidderData:[
                {
                    state: '成功',
                    number: 2,
                    price: 10000
                }
              ],
              isShowChangeDialog: false,
              data: [],
              zyTime: 0,
              xsTime: '',
              falseXsTime: 0,
              ysTime: '',
              falseYsTime: 0,
              able: false,
              range: 0,
              jmh: '',
              price: 0,
              timer: '',
              priceNow: '',
              jmhNow: '',
              kpTime: '',
              timeId: '',
              isYstime: false,
              isStop: false,
              priceMax: 0,
              finishYs: false,
              startYs: false,
              query: '',
              lotInfo: {},
              countTime: 0,
              pmsInfo: {},
              szd: '',
          }
      },
      props: {
        
      },
      methods: {
        imgChange(item){
            console.log(item);
            this.imgSrc = item;
        },
        changeTimeFormat(time) {
            var timeList = [];
            timeList = time.split(":");
            console.log(timeList)
            if (timeList[0] == '00') {
                if (timeList[1] == '00') {
                    return timeList[2] + "秒";
                } else {
                    if (timeList[2] == '00') {
                        return timeList[1] + "分";
                    } else {
                        return timeList[1] + "分" + timeList[2] + "秒";
                    }
                }
            } else {
                if (timeList[1] == '00') {
                    if (timeList[2] == '00') {
                        return timeList[0] + "小时";
                    } else {
                        return timeList[0] + "小时" + timeList[2] + "秒";
                    }
                } else {
                    if (timeList[2] == '00') {
                        return timeList[0] + "小时" + timeList[1] + "分";
                    } else {
                        return timeList[0] + "小时" + timeList[1] + "分" + timeList[2] + "秒";
                    }
                }
            }
        },
        // asyncTest(){
        //     return new Promise((resolve) => {
        //         getLotInfo(this.query).then((res) => {
        //             if(res.data){
        //                 this.lotInfo = res.data[0];
        //                 console.log('lotInfo',this.lotInfo);
        //                 this.imgSrc = this.lotInfo.sctp;
        //                 this.imgList.push(this.lotInfo.sctp);
        //                 this.$refs.introduction.innerHTML = this.lotInfo.bdjs;
        //                 this.$refs.important.innerHTML = this.lotInfo.zyts;
        //                 this.xsTime = this.changeTimeFormat(this.lotInfo.xsjjsj);
        //                 this.ysTime = this.changeTimeFormat(this.lotInfo.ysjjsj);
        //                 console.log('执行完毕0');
        //                 resolve();
        //             }
        //         })
                
        //     }).then(() => {
        //         console.log('拍卖会编号',this.lotInfo.pmhbh);
        //         getPmhInfo(this.lotInfo.pmhbh).then((res) => {
        //             if(res){
        //                 console.log('拍卖会',res);
        //             }
        //         });
        //         console.log('执行完毕1');
        //     }).then(() => {
        //         console.log('执行完毕2');
        //     }).then(() => {
        //         console.log('执行完毕3');
        //     })
            
        // },
        getLot(){
            getLotInfo(this.query).then((res) => {
                if(res.data){
                    this.lotInfo = res.data[0];
                    console.log('lotInfo',this.lotInfo);
                    this.imgSrc = this.lotInfo.sctp;
                    this.imgList.push(this.lotInfo.sctp);
                    this.$refs.introduction.innerHTML = this.lotInfo.bdjs;
                    this.$refs.important.innerHTML = this.lotInfo.zyts;
                    this.xsTime = this.changeTimeFormat(this.lotInfo.xsjjsj);
                    this.ysTime = this.changeTimeFormat(this.lotInfo.ysjjsj);
                    let temp = this.lotInfo.szd.split(',');
                    for(let item of temp){
                        this.szd += item;
                    }
                    console.log('拍卖会编号',this.lotInfo.pmhbh);
                    // setTimeout(() => {
                            getPmhInfo(this.lotInfo.pmhbh).then((res2) => {
                                if(res2){
                                    console.log('拍卖会',res2);
                                    this.countTime = new Date(res2.data.kpsj).getTime();
                                    getPmsInfo(res2.data.pmsbh).then((res3) => {
                                        if(res3){
                                            console.log('拍卖师',res3);
                                            this.pmsInfo = res3.data;
                                        }
                                    })
                                }
                            });
                    // },1000);
                    
                }
            })
        }
      },
      mounted(){
        // console.log(this.$route.query);
        this.query = this.$route.query.bdbh;
        this.getLot();
        // this.asyncTest();
      }


  }
  </script>
  
  <style lang="less" scoped>
      *{
          margin: 0;
          padding: 0;
      }
      .top{
        background-color: #fff;
        display: flex;
        margin-bottom: 10px;
        justify-content: space-between;
      }
      .top .text{
        text-align: left;
        padding: 14px;
        margin-left: 50px;
      }
      .top .text .name{
        padding: 14px;
        font-weight: bold;
        font-size: 20px;
      }
      .top .text .company{
        padding: 14px;
        font-size: 12px;
        color: #444;
      }
      .top .text .tel{
        padding: 14px;
        font-size: 12px;
        color: #444;
        margin: -14px 0 14px 0;
      }
      .top .imgSmall{
          margin-right: 20%;
        //   width: 34%;
          display: flex;
        //   flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
      }
      .top .imgSmall .imgS{
          width: 80px; 
          height: 80px; 
          margin: 10px;
        //   border-radius: 10px;
          border: 1px solid #999;
      }
      .right{
          background: #fff; 
        //   width: 19%; 
        //   height: 100%; 
        //   float: right;
          margin-left: 10px;
          padding: 0 50px;
      }
      .right .rightTop{
        background: #fff;
      }
      .right .rightTop .bar{
          display: flex;
          justify-content: space-between;
          margin: 4px;
      }
      .right .rightTop .bar span{
          color: rgb(220, 220, 220);
      }
      .right .rightTop .textArea1{
          width: 100%; 
          padding: 4px;
        //   border: 1px solid rgb(220, 220, 220); 
          /* height: 300px; */
          margin: 0 auto;
          position: relative;
          text-align: center;
      }
      .right .rightTop .textArea1 .sideBtn{
        background-color: #f00; 
        color: #fff; 
        padding: 4px; 
        position: absolute; 
        top: 11%; 
        right: 100%;
      }
      
      .right .rightBottom{
          margin-top: 10px;
          background: #fff; 
      }
      .right .rightBottom .info{
          height: 100%;
      }
      .middle{
        display: flex;
        justify-content: space-between;
      }
      .main{
          background: #fff;
        //   width: 80%;
          display: flex;
          padding: 14px;
      }
      .main .line1{
          padding: 0 14px;
        //   width: 28%;
          height: 100%;
          background: #fff;
          margin-left: 50px;
      }

      .main .line1 .top{
        display: flex;
      }

      .main .line1 .top .button{
        width: 100%;
        height: 36px;
        margin: 1% 0;
        padding: 10px;
      }

      .main .line1 .imgLarge{
          margin: 10px 0;
          width: 74%;
      }
      .main .line1 .imgLarge .imgL{
          width: 300px; 
          height: 200px; 
        //   border-radius: 10px;
      }
      .main .line1 .imgLarge .state{
          text-align: center;
          margin-top: -4px;
          background: #f00;
          color: #fff;
          width: 300px;
          margin: 0 auto;
          border: 1px solid #999;
      }
      .main .line1 .imgSmall{
          margin: 20px 0;
          width: 74%;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
      }
      .main .line1 .imgSmall .imgS{
          width: 100px; 
          height: 80px; 
          margin: 1%;
        //   border-radius: 10px;
          border: 1px solid #999;
      }
      .main .line1 .char{
          font-size: 14px;
          display: flex;
          width: 74%;
          justify-content: space-between;
      }
      .main .line2{
        // padding-right: 100px;
      }

      .main .line2 .button{
        width: 300px;
        margin: 0 auto;
        height: 200px;
        text-align: center;
        // background-color: rgb(244, 223, 223);
      }
      .introduction p img{
        width: 400px !important;
        height: 300px !important;
        margin: 0 auto;
      }
  </style>